﻿<div class="row-fluid">
    <div class="border-spacer">Overview of ESG Issues - {{analystView.subPeerGroup}}</div>
    <div class="col-md-12" ng-show="analystView.keyEsgIssueValues.length > 0" style="padding: 0;">
        <div>
            The Materiality Matrix presents, from the perspective of the industry, the most material ESG issues from a business impact and/or environmental/social impact perspective. ESG issues can be interpreted as the most important management areas, i.e. the issues that could cause the most significant business and/or environmental/social impacts if not managed well. The location on the matrix indicates the relative importance of the ESG issue, with those located in the top right corners being the most material for the industry as a whole.
        </div>
    </div>
    <div class="col-md-8" style="position:relative;">
        
        <div ng-show="analystView.keyEsgIssueValues.length == 0">
            There are no key ESG issues for this company.
        </div>
        <div class="sustainalyticsBlockui" isvisible="analystView.industryOverviewChartIsLoading"></div>
        <div id="chartdiv" style="width: 100%; height: 400px; background-color: #FFFFFF;" class="sustainalytics-chart-xy" useroptions="analystView.keyEsgIssueValuesXyChartOptions"
             isloading="analystView.industryOverviewChartIsLoading"></div>
    </div>
    <div class="col-md-4"><br /><br />
        <ul class="graph-legend">
            <li ng-repeat="val in analystView.keyEsgIssueValues">
                <div class="graph-legend-bullet" ng-class="{ grey: !val.keyEsgIssue.selected, green: val.keyEsgIssue.selected }">{{ val.letter }}</div>
                <div class="graph-legend-text" ng-class="{ green: val.keyEsgIssue.selected }" title="{{val.keyEsgIssue.description}}">{{ val.keyEsgIssue.name }}</div>
                <div class="clear">&nbsp;</div>
            </li>
        </ul>
        <div class="clear"></div><br /><br />
        <!--<ul class="graph-legend">
            <li>
                <div class="graph-legend-bullet green" ng-show="analystView.keyEsgIssueValues.length > 0"></div>
                <div class="graph-legend-text"><b style="color: #808080" ng-show="analystView.keyEsgIssueValues.length > 0">= Key ESG Issues (with Analyst Commentary)</b></div>
                <div class="clear">&nbsp;</div>
            </li>
        </ul><br />-->
        <!--<ul class="graph-legend">
            <li>
                <div class="graph-legend-bullet green"></div>
                <div class="graph-legend-text"><b style="color: #808080">= Exposure dependent key ESG issue</b></div>
                <div class="clear">&nbsp;</div>
            </li>
        </ul>-->
    </div>
    <div class="clear"></div>
</div>